<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>粘性定位</title>
    <style>
      * {
          margin: 0;
          padding: 0;

      }
      body{
          height: 2500px;
      }

      .page-header {
          background-color: orange;
          text-align: center;
          height: 100px;
          line-height: 100px;
          font-size: 20px;
      }
        .content {
            height: 200px;
            overflow: auto;
        }
        .item{
            background-color: gray;
            font-size: 20px;
            text-align: center;
        }
        .item>.first{
            background-color: skyblue;
            position: sticky;
            top: 10px;
        }
    </style>
</head>
<body>
<div class="page-header">头部区域</div>
<!--内容区-->
<div class="content">
    <div class="item">
        <div class="first">A</div>
        <div>A1</div>
        <div>A2</div>
        <div>A3</div>
        <div>A4</div>
        <div>A5</div>
        <div>A6</div>
        <div>A7</div>
        <div>A8</div>
    </div>

    <div class="item">
        <div class="first">B</div>
        <div>B1</div>
        <div>B2</div>
        <div>B3</div>
        <div>B4</div>
        <div>B5</div>
        <div>B6</div>
        <div>B7</div>
        <div>B8</div>
    </div>

    <div class="item">
        <div class="first">C</div>
        <div>C1</div>
        <div>C2</div>
        <div>C3</div>
        <div>C4</div>
        <div>C5</div>
        <div>C6</div>
        <div>C7</div>
        <div>C8</div>
    </div>
</div>

<hr>
<img src="../../images/粘性定位.png" width="450px">
</body>
</html>